Input Fields এবং Form Submissions

Ionic ফ্রেমওয়ার্কে Input Fields এবং Form Submissions তৈরি করা সহজ এবং সরল। এখানে আমরা দেখব কিভাবে Ionic এ বিভিন্ন ধরনের ইনপুট ফিল্ড এবং ফর্ম তৈরি করতে হয়, এবং কিভাবে ফর্ম সাবমিট করার জন্য ডেটা সংগ্রহ করতে হয়।

১. Input Fields তৈরি করা

Ionic ফ্রেমওয়ার্কে বিভিন্ন ধরনের ইনপুট ফিল্ড যেমন text, password, email, number, checkbox, radio, select ইত্যাদি তৈরি করা যায়। এগুলি ব্যবহার করে আপনি একটি পূর্ণাঙ্গ ফর্ম তৈরি করতে পারেন।

১.১ Basic Input Field

নিম্নলিখিত উদাহরণে একটি সাধারণ text input ফিল্ড তৈরি করা হয়েছে:

<ion-item>
  <ion-label position="floating">Full Name</ion-label>
  <ion-input type="text" [(ngModel)]="fullName"></ion-input>
</ion-item>

• ion-label: ইনপুট ফিল্ডের জন্য লেবেল তৈরি করে।
• ion-input: ইনপুট ফিল্ডের জন্য ব্যবহৃত উপাদান।
• [(ngModel)]: ডেটা বাইন্ডিং যা ফর্মের ডেটাকে Angular মডেলের সাথে সংযুক্ত করে। এই ক্ষেত্রে, fullName একটি পরিবর্তনশীল যা ব্যবহারকারীর ইনপুট গ্রহণ করবে।

১.২ Password Input Field

<ion-item>
  <ion-label position="floating">Password</ion-label>
  <ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>

এখানে type="password" দিয়ে পাসওয়ার্ড ইনপুট ফিল্ড তৈরি করা হয়েছে, যা ইনপুটের মানগুলো মাস্ক করবে।

১.৩ Email Input Field

<ion-item>
  <ion-label position="floating">Email</ion-label>
  <ion-input type="email" [(ngModel)]="email"></ion-input>
</ion-item>

এখানে type="email" দিয়ে ইমেল ইনপুট ফিল্ড তৈরি করা হয়েছে, যা স্বয়ংক্রিয়ভাবে ইমেল ঠিকানার যাচাই করবে।

১.৪ Number Input Field

<ion-item>
  <ion-label position="floating">Age</ion-label>
  <ion-input type="number" [(ngModel)]="age"></ion-input>
</ion-item>

এখানে type="number" দিয়ে সংখ্যা ইনপুট ফিল্ড তৈরি করা হয়েছে, যা শুধুমাত্র সংখ্যাই গ্রহণ করবে।

১.৫ Checkbox Input Field

<ion-item>
  <ion-label>Accept Terms and Conditions</ion-label>
  <ion-checkbox [(ngModel)]="isAccepted"></ion-checkbox>
</ion-item>

এখানে একটি চেকবক্স তৈরি করা হয়েছে যা isAccepted ভ্যালুর সাথে যুক্ত। ব্যবহারকারী চেকবক্সটি চেক করলে এটি true এবং না করলে false হয়ে যাবে।

১.৬ Radio Input Field

<ion-item>
  <ion-label>Gender</ion-label>
  <ion-radio-group [(ngModel)]="gender">
    <ion-item>
      <ion-label>Male</ion-label>
      <ion-radio value="male"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Female</ion-label>
      <ion-radio value="female"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-item>

এখানে একটি radio group তৈরি করা হয়েছে যেখানে ব্যবহারকারী শুধুমাত্র একটিই অপশন নির্বাচন করতে পারবেন: Male অথবা Female।

১.৭ Select Input Field

<ion-item>
  <ion-label>Country</ion-label>
  <ion-select [(ngModel)]="selectedCountry">
    <ion-select-option value="US">United States</ion-select-option>
    <ion-select-option value="IN">India</ion-select-option>
    <ion-select-option value="UK">United Kingdom</ion-select-option>
  </ion-select>
</ion-item>

এখানে একটি select dropdown তৈরি করা হয়েছে যেখানে ব্যবহারকারী একটি দেশ নির্বাচন করতে পারবেন।

২. Form Submission

Ionic এ ফর্ম সাবমিট করতে হলে, ngSubmit ইভেন্ট ব্যবহার করা হয়। আপনি যেকোনো ইনপুট ফিল্ডে ডেটা সংগ্রহ করার পরে, ngSubmit দিয়ে ফর্মটি সাবমিট করতে পারবেন।

২.১ Simple Form Submission

<ion-header>
  <ion-toolbar>
    <ion-title>Registration Form</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form (ngSubmit)="submitForm()">
    <ion-item>
      <ion-label position="floating">Full Name</ion-label>
      <ion-input type="text" [(ngModel)]="fullName" name="fullName"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">Email</ion-label>
      <ion-input type="email" [(ngModel)]="email" name="email"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" [(ngModel)]="password" name="password"></ion-input>
    </ion-item>

    <ion-button expand="full" type="submit">Submit</ion-button>
  </form>
</ion-content>

• ngSubmit: ফর্ম সাবমিট করার জন্য Angular এর বিল্ট-ইন ইভেন্ট।
• [(ngModel)]: ইনপুট ফিল্ডের ডেটা মডেলের সাথে বাইন্ড করা হচ্ছে, যাতে ফর্মে পরিবর্তিত ডেটা রাখা যায়।

২.২ Form Submission Function in TypeScript

এখন, ফর্ম সাবমিট করার জন্য submitForm() ফাংশনটি TypeScript ফাইলে তৈরি করতে হবে।

import { Component } from '@angular/core';

@Component({
  selector: 'app-registration',
  templateUrl: 'registration.page.html',
  styleUrls: ['registration.page.scss'],
})
export class RegistrationPage {
  fullName: string = '';
  email: string = '';
  password: string = '';

  constructor() {}

  submitForm() {
    console.log('Full Name:', this.fullName);
    console.log('Email:', this.email);
    console.log('Password:', this.password);
  }
}

এখানে submitForm() ফাংশনটি ফর্ম ডেটা কনসোলে লোগ করবে। আপনি এই ডেটা সার্ভারে পাঠাতে বা অন্য কোনো কাজ করতে ব্যবহার করতে পারেন।

৩. Form Validation

Ionic ফ্রেমওয়ার্কে ফর্ম ভ্যালিডেশনও সহজে করা যায়। Angular Reactive Forms বা Template-driven Forms ব্যবহার করে আপনি ইনপুট ফিল্ডের জন্য ভ্যালিডেশন যুক্ত করতে পারেন।

৩.১ Basic Validation Example

<form (ngSubmit)="submitForm()" #myForm="ngForm">
  <ion-item>
    <ion-label position="floating">Full Name</ion-label>
    <ion-input type="text" [(ngModel)]="fullName" name="fullName" required></ion-input>
  </ion-item>

  <ion-item>
    <ion-label position="floating">Email</ion-label>
    <ion-input type="email" [(ngModel)]="email" name="email" required email></ion-input>
  </ion-item>

  <ion-button expand="full" type="submit" [disabled]="myForm.invalid">Submit</ion-button>
</form>

এখানে required এবং email ফিল্ড ভ্যালিডেশন যুক্ত করা হয়েছে। ফর্মটি সাবমিট করার আগে ইনপুটগুলি সঠিকভাবে পূর্ণ ও ভ্যালিড হতে হবে।

সারাংশ

• Input Fields: Ionic এ বিভিন্ন ধরনের ইনপুট ফিল্ড যেমন text, email, password, checkbox, radio, select ইত্যাদি ব্যবহার করা যায়।
• Form Submission: ngSubmit ইভেন্ট দিয়ে ফর্ম ডেটা সাবমিট করা হয়।
• Validation: ইনপুট ফিল্ডে ভ্যালিডেশন যুক্ত করা যায় Angular এর required, email প্রপার্টির মাধ্যমে।

Ionic ফ্রেমওয়ার্কে ফর্ম এবং ইনপুট ফিল্ড ব্যবহার করা খুবই সহজ এবং এর মাধ্যমে আপনি অ্যাপের ইউজার ইন্টারফেস তৈরি করতে পারবেন।